{% extends "base.html" %} {% block title %}首页{% endblock %} {% load staticfiles %} {% block content %}
<div class="admin">
    <div class="listbiaoti">
        <ul> 版本统计</ul>
        <dl style="float: right;"> 当前位置： Jira数据统计 >
            <a href="#">版本统计</a>
        </dl>
    </div>
    <div class="container" style="width: 98%; background-color: #ffffff">
        <div class="col-lg-6 input-group" style="margin: 15px 0px 0px 0px; width: 500px;">
            <h3>
                请选择项目版本：
                <select class="selectpicker" data-width="50%">
                    <option disabled selected = "selected" >请选择想要查询的版本</option>
                    {% for version in versions %}
                        <option>{{version.name}}</option>
                    {% endfor %}
                </select>
                <button class="btn btn-default" id="btn-search" type="button">
                    搜索
                </button>
            </h3>
        </div>

        <!-- /input-group -->
        <table class="table table-bordered col-lg-5" style="width: 100%; height: 100%; margin: 15px auto">
            <!-- <caption>BUG数据统计</caption> -->
            <thead>
                <tr>
                    <th>统计内容</th>
                    <th>数据内容</th>
                    <th>数据图例</th>
                    <th>备注</th>
            </thead>
            <tbody>
                <tr>
                    <td>自测未通过BUG分布</td>
                    <td>
                        <table class="table table-striped" style="width: 100%; height: 60%;">
                            <thead>
                                <tr>
                                    <th>类别</th>
                                    <th>BUG数量</th>
                                </tr>
                            </thead>
                            <tbody id = 'bug-devtestdata'>
                                {% for dtdata in devtestdata %}
                                    <tr>
                                        <td>{{dtdata.field_name}}</td>
                                        <td>{{dtdata.totalnum}}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <div class="col-lg-5" id="bug-devtest" style="width: 550px; height: 400px; margin: 0 auto"></div>
                    </td>
                    <td>暂无</td>
                </tr>
                <tr>
                    <td>BUG功能分布</td>
                    <td>
                        <table class="table table-striped" style="width: 100%; height: 60%;">
                            <thead>
                                <tr>
                                    <th>功能名称</th>
                                    <th>BUG数量</th>
                                </tr>
                            </thead>
                            <tbody id = 'bug-functiondata'>
                                {% for function in functiondata %}
                                    <tr>
                                        <td>{{function.field_name}}</td>
                                        <td>{{function.totalnum}}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <div class="col-lg-5" id="bug-function" style="width: 550px; height: 400px; margin: 0 auto"></div>
                    </td>
                    <td>暂无</td>
                </tr>
                <tr>
                    <td>BUG系统分布</td>
                    <td>
                        <table class="table table-striped" style="width: 100%; height: 60%;">
                            <thead>
                                <tr>
                                    <th>系统名称</th>
                                    <th>BUG数量</th>
                                </tr>
                            </thead>
                            <tbody id='bug-projectdata'>
                                {% for module in moduledata %}
                                    <tr>
                                        <td>{{module.field_name}}</td>
                                        <td>{{module.totalnum}}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <div class="col-lg-5  pull-left" id="bug-project" style="width: 550px; height: 400px; margin: 0 auto"></div>
                    </td>
                    <td>暂无</td>
                </tr>
                <tr>
                    <td>BUG分类占比</td>
                    <td>
                        <table class="table table-striped" style="width: 100%; height: 60%;">
                            <thead>
                                <tr>
                                    <th>BUG类型</th>
                                    <th>BUG数量</th>
                                </tr>
                            </thead>
                            <tbody id='bug-typedata'>
                                {% for attribute in attributedata %}
                                    <tr>
                                        <td>{{attribute.field_name}}</td>
                                        <td>{{attribute.totalnum}}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <div class="col-lg-5  pull-left" id="bug-type" style="width: 550px; height: 400px; margin: 0 auto"></div>
                    </td>
                    <td>暂无</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">

    var devtestdata = {{ devtestdata|safe }}; // 获取自测未通过BUG数据
    var functiondata = {{ functiondata|safe }}; // 获取功能BUG数据
    var moduledata = {{ moduledata|safe }}; // 获取模块BUG数据
    var attributedata = {{ attributedata|safe }}; // 获取BUG属性数据

    var jsondt = {};
    var jsonfun = {};
    var jsonmo = {};
    var jsonatt = {};
    var dtpic = [];
    var funpic = [];
    var mopic = [];
    var attpic = [];

    function get_versiondata(cla, data){
    /*
    传入数据，生成对应饼状图或者柱状图格式数据
    :param: cla: 'column'或者'pie'
    :param: data: 传入json格式数据
    :return: 返回对应格式数据
    */
        let newdata = []
        if (cla == 'column') {
            data.forEach((item) => {
                let va = new Array();
                va.push(item.totalnum)
                let val = {};
                val.name = item.field_name;
                val.data = va;
                newdata.push(val);
            });
        }
        else if (cla == 'pie'){
            data.forEach((item) => {
                let val = {};
                val.name = item.field_name;
                val.y = item.totalnum;
                newdata.push(val);
            });
        }
        return newdata
    };

    function update_versiondata(versiondata){
        /*
        更新所有数据
        :param: versiondata: 传入数据
        */
        jsondt.series[0].data = get_versiondata('pie', versiondata.devtestdata);
        jsonfun.series[0].data = get_versiondata('pie', versiondata.functiondata);
        jsonmo.series= get_versiondata('column', versiondata.moduledata);
        jsonatt.series[0].data = get_versiondata('pie', versiondata.attributedata);
        $('#bug-devtest').highcharts(jsondt);
        $('#bug-function').highcharts(jsonfun);
        $('#bug-project').highcharts(jsonmo);
        $('#bug-type').highcharts(jsonatt);

        dtd = '';
        versiondata.devtestdata.forEach((item) => {
            dtd = dtd + "<tr><td>" + item.field_name + "</td><td>" + item.totalnum + "</td></tr>"
        });
        $('#bug-devtestdata').html(dtd);

        fd = '';
        versiondata.functiondata.forEach((item) => {
            fd = fd + "<tr><td>" + item.field_name + "</td><td>" + item.totalnum + "</td></tr>"
        });
        $('#bug-functiondata').html(fd);

        pd = '';
        versiondata.moduledata.forEach((item) => {
            pd = pd + "<tr><td>" + item.field_name + "</td><td>" + item.totalnum + "</td></tr>"
        });
        $('#bug-projectdata').html(pd);

        td = '';
        versiondata.attributedata.forEach((item) => {
            td = td + "<tr><td>" + item.field_name + "</td><td>" + item.totalnum + "</td></tr>"
        });
        $('#bug-typedata').html(td);
    }

    $(document).ready(function () {
        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            // height: 400,
            // width: 400
        };
        var title = {
            text: '自测未通过BUG分布'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        };
        var series = [{
            type: 'pie',
            name: '百分比：',
            data: get_versiondata('pie', devtestdata)
        }];

        jsondt.chart = chart;
        jsondt.title = title;
        jsondt.tooltip = tooltip;
        jsondt.series = series;
        jsondt.plotOptions = plotOptions;
        $('#bug-devtest').highcharts(jsondt);
    });

    $(document).ready(function () {
        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            // height: 350,
            // width: 350
        };
        var title = {
            text: 'BUG功能分布'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        };
        var series = [{
            type: 'pie',
            name: '百分比：',
            data: get_versiondata('pie', functiondata),
        }];

        jsonfun.chart = chart;
        jsonfun.title = title;
        jsonfun.tooltip = tooltip;
        jsonfun.series = series;
        jsonfun.plotOptions = plotOptions;
        $('#bug-function').highcharts(jsonfun);
    });

    $(document).ready(function () {
        var chart = {
            type: 'column'
        };
        var title = {
            text: 'BUG系统分布'
        };
        var subtitle = {
            text: '数据来源: jira.jd.com'
        };
        var xAxis = {
            categories: [''],
            crosshair: true
        };
        var yAxis = {
            min: 0,
            title: {
                text: '单位 (个)'
            }
        };
        var tooltip = {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.0f} 个</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
        };
        var plotOptions = {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        };
        var credits = {
            enabled: false
        };

        var series = get_versiondata('column', moduledata);

        jsonmo.chart = chart;
        jsonmo.title = title;
        jsonmo.subtitle = subtitle;
        jsonmo.tooltip = tooltip;
        jsonmo.xAxis = xAxis;
        jsonmo.yAxis = yAxis;
        jsonmo.series = series;
        jsonmo.plotOptions = plotOptions;
        jsonmo.credits = credits;
        $('#bug-project').highcharts(jsonmo);
    });

    $(document).ready(function () {
        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            // height: 350,
            // width: 350,
        };
        var title = {
            text: 'BUG分类占比'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        };
        var series = [{
            type: 'pie',
            name: '百分比:',
            data: get_versiondata('pie', attributedata),
        }];

        jsonatt.chart = chart;
        jsonatt.title = title;
        jsonatt.tooltip = tooltip;
        jsonatt.series = series;
        jsonatt.plotOptions = plotOptions;
        $('#bug-type').highcharts(jsonatt);
    });

    $('#btn-search').click(function(){
        var data = {
            version: $(".selectpicker").find("option:selected").text()
        }
        $.ajax({  
            type : 'post',
            url : "/api/jira_version/",
            contentType: "application/json",
            data: JSON.stringify(data),
            success : function(datas) {
                let alldata = JSON.parse(datas)
                update_versiondata(alldata)
            },
            error: function () {
                myAlert('Sorry，服务器可能开小差啦, 请重试!');
            }
        });
    });

</script>

{% endblock %}